<template>
  <div class="Non-platform">
    <div class="Non-platform-container">
      <div class="headerContent">
        <split-vertical title="非平台订单详情"></split-vertical>
        <div class="Non-platform-module">
          <el-row>
            <el-col :span="8">
              <label>省:</label><span>{{aboveData.province}}</span>
            </el-col>
            <el-col :span="8">
              <label>市：</label><span>{{aboveData.city}}</span>
            </el-col>
            <el-col :span="8">
              <label>区：</label><span>{{aboveData.district}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <label>购买数量：</label><span>{{aboveData.purchaseNum}}</span>
            </el-col>
            <el-col :span="8">
              <label>重量(kg)：</label><span>{{aboveData.orderWeight}}</span>
            </el-col>
            <el-col :span="8">
              <label>订单时间：</label><span>{{aboveData.orderTime}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <label>订单金额：</label><span>{{aboveData.orderMoney}}</span>
            </el-col>
            <el-col :span="8">
              <label>商品成本总价：</label><span>{{aboveData.itemCost}}</span>
            </el-col>
            <el-col :span="8">
              <label>商品种类数量：</label><span>{{aboveData.itemCount}}</span>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="8">
              <label>快递费用：</label><span>{{aboveData.expressCharges}}</span>
            </el-col>
            <el-col :span="8">
              <label>订单编号：</label><span>{{aboveData.orderCode}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <label>收货人：</label><span>{{aboveData.receiverName}}</span>
            </el-col>
            <el-col :span="8">
              <label>联系方式：</label><span>{{aboveData.receiverPhone}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <label>订单客户备注：</label><span>{{aboveData.orderNote}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <label>收货地址：</label><span>{{aboveData.receiverAddress}}</span>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="tableView">
       <split-vertical title="商品明细 　&&　订单明细"></split-vertical>
        <el-tabs v-model="activeName" type="card" >
          <el-tab-pane label="商品明细" name="first">
            <div class="table">
              <el-table
                :data="items"
                height="260"
                :header-cell-style="getRowClass"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                  prop="supplyItemId"
                  label="授权产品ID"
                  :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                  prop="itemName"
                  label="商品名称"
                  :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                  prop="itemCode"
                  label="商品编码"
                  :show-overflow-tooltip="true"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="purchasePrice"
                  label="进货价"
                  :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                  prop="itemBarCode"
                  label="商品条形码"
                  :show-overflow-tooltip="true"
                  width="200">
                </el-table-column>
                <el-table-column
                  width="80"
                  prop="purchaseNum"
                  label="购买数量">
                </el-table-column>
                <el-table-column
                  width="80"
                  prop="weight"
                  label="重量">
                </el-table-column>
                <el-table-column
                  width="80"
                  prop="purchasePrice"
                  label="进货价" >
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="子订单明细" name="second">
            <div class="table">
              <el-table
                :header-cell-style="getRowClass"
                :data="subs"
                height="260"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                  prop="subOrderCode"
                  label="子订单编号"
                  :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                  prop="itemCost"
                  label="成本价"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="orderWeight"
                  label="订单重量"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="expressCharges"
                  label="快递费用"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="expressCode"
                  label="快递单号">
                </el-table-column>
                <el-table-column
                  width="80"
                  prop="orderStatus"
                  label="订单状态">
                  <template slot-scope="scope">
                    <p>{{scope.row.orderStatus | orderStatus}}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="80">
                  <template slot-scope="scope">
                    <el-button
                      @click="look(scope.row)"
                      type="text"
                      size="small">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

        </el-tabs>
      </div>
      <!--弹框-->
      <view-order v-if="show" :row="row" @close="close"></view-order>
      <div class="back">
        <el-button @click="cancel" style="margin-right:20px;" size="medium">返回</el-button>
        <el-button @click="confirm" size="medium" type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>

  import viewOrder from 'components/base/platformOrder/viewOrder'
  import SplitVertical from "components/common/SplitVertical"

  export default {
    components:{
      SplitVertical,viewOrder
    },
    data(){
      return{
        aboveData:{},
        items:[],
        id:'',
        activeName:'first',
        show:false,
        row:{},
        subs:[]
      }
    },
    filters:{
      orderStatus(val){
        switch(val){
          case "A":return '待发货';break;
          case "B":return '已发货';break;
          case "C":return '已完成';break;
        }
      }
    },
    created(){
      this.id= this.$route.query.id
      let parm={
        id:this.id
      }
      let succ=data=>{
        if(data.code=="OK"){
          this.aboveData=data.data
          this.items=data.data.items
          this.subs=data.data.subs
        }else{
          this.$message.error(data.msg)
        }
      }
      this.api.internalOrderGetOne(parm,succ)
    },
    methods:{
      look(row){
        this.show=true
        this.row=row
      },
      close(){
        this.show=false;
      },
      confirm(){
        this.$router.go(-1)
      },
      //设置表格第一行的颜色
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex == 0) {
          return 'background:#fafafa;color:rgba(0, 0, 0, 0.85)'
        } else {
          return ''
        }
      },
      //取消，关闭弹窗
      cancel(){
        this.$router.go(-1)
      },
    },

  }
</script>
<style scoped>
  .Non-platform .el-form--inline .el-form-item{
    margin:10px 30px;
  }
  .Non-platform .el-input{
    width:250px;
  }
</style>
<style lang="scss" scoped>
  .Non-platform{
    .Non-platform-container{
      .headerContent{
        background:#fff;
        border-left: 2px solid #e8e8e8;
        border-right: 2px solid #e8e8e8;
        border-bottom: 2px solid #e8e8e8;
      }
      label{
        width:150px;
        color:#606266;
        font-size:14px;
        line-height:30px;
        text-align: center;
        display: inline-block;
      }
      span{
        font-size:14px;
      }

      .orderBtn{
        display: block;
        margin:100px 40% 0 40%;
      }
      .table{
        margin:10px 0;
      }
    }
    .back{
      width:100%;
      text-align:center;
      padding:20px 0;
    }
    .tableView{
      margin-top:3px;
      padding: 0 5px;
      background: #fff;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
    }
  }
</style>
